    <!DOCTYPE html>
    <html lang="en"><head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        div{
            /*//width:100%;*/

            text-align: center;
            padding-top: 50px;
        }
        #ibutton{
            display:inline-block;
            border: 2px dashed #b80063;
            width: 200px;
            height: 60px;

        }
        .continer{
            list-style: none;

        }
        .continer li{
            display: block;
            background-color: #7AB800;
            cursor: pointer;
            margin: 10px 0;
        }

    </style>
    <body>
    <div>
        <button id="ibutton">芝麻开门</button>
        <ul class="continer"></ul>
    </div>
    <script>
        var ul=document.getElementsByClassName("continer")[0];
        var button=document.getElementById("ibutton");
        button.onclick=function () {
            var aArr=["陕西煤老板","四川老陈醋","辽宁大金矿","内蒙山羊肉"];
            for(var i=0;i<aArr.length;i++){
                var newli=document.createElement("li");
                newli.innerHTML=aArr[i];
                ul.appendChild(newli);
            }
            var liArr=ul.children;
            for(var j=0;j<liArr.length;j++){
                liArr[j].onclick=function () {
                    for(var i=0;i<liArr.length;i++){
                        liArr[i].style.backgroundColor="";
                    }
                    this.style.backgroundColor="red";
                }
            }
        }


    </script>

    </body>
    </html>